<template>
  <div class="top">
    <div class="content flex j-between a-center">
      <div class="left flex a-center" @click="router.push('/')">
        <el-icon size="16" color="#4bb4da"><HomeFilled /></el-icon>
        首页
      </div>
      <div class="right flex">
        <div class="login" v-if="!loginStatus" @click="router.push('/login')">
          <span>去登录</span>
        </div>
        <div class="login" v-if="loginStatus" @click="router.push('/mine/personal')">
          <span>个人资料</span>
        </div>
        <div class="login" v-if="loginStatus" @click="router.push('/mine/myOrder')">
          <span>我的订单</span>
        </div>
      </div>
    </div>
  </div>
  <div class="bottom flex column a-center">
    <div class="container">
      <img :src="webInfo.company_logo" class="shop-logo" alt="" @click="router.push('/')" />
      <div class="search-container">
        <el-input class="search-input" placeholder="">
          <template #prefix>
            <el-icon color="#409EFC" size="20">
              <Search />
            </el-icon>
          </template>
        </el-input>
        <div class="search-button">搜索</div>
      </div>
      <div class="empty-box">
        <!-- 占位 -->
      </div>
    </div>
    <div style="border-bottom: 1px #41b0d9 solid; width: 100%">
      <div class="nav">
        <div class="nav-fix" @click="allGoods">全部商品</div>
        <div
          v-for="item in webInfo.cate as any"
          :key="item.id"
          :class="item.id == activeID ? 'nav-item active' : 'nav-item'"
          @click="changeNav(item)"
        >
          {{ item.cate_title }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useUserInfoStore } from '@/stores/userInfo'
const userInfoStore = useUserInfoStore()
const { loginStatus } = storeToRefs(userInfoStore)

import { type Cate } from '../types/webInfo'
import { useWebInfoStore } from '@/stores/webInfo'
const webInfoStore = useWebInfoStore()
const { webInfo } = webInfoStore
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
let activeID = ref(0)
import emitter from '@/utils/mitter'
function changeNav(item: Cate) {
  activeID.value = item.id
  if (item.id == 951231) {
    router.push('/about')
  } else {
    emitter.emit('get-cate_id', item.id)
    router.push({ path: '/class', query: { id: item.id } })
  }
}
function updateNav(item: number) {
  activeID.value = item
}

function allGoods() {
  activeID.value = 0
  emitter.emit('get-cate_id', '')
  router.push('/class')
}
defineExpose({
  updateNav
})
</script>

<style lang="scss" scoped>
.top {
  height: 30px;
  width: 100%;
  background-color: var(--grey);
  .content {
    margin: 0 auto;
    width: var(--wd);
    height: 100%;
    .left {
      color: #a2a2a2;
      font-size: 14px;
      cursor: pointer;
      &:hover {
        color: #4bb4da;
      }
    }
    .right {
      .login,
      .register {
        cursor: pointer;
        height: 30px;
        padding: 0 10px;
        font: 14px/30px '微软雅黑';
        color: #4bb4da;
        &:hover {
          background-color: #fff;
        }
      }
    }
  }
}
.bottom {
  height: 140px;
  background: #fff;
  .container {
    height: 100px;
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .shop-logo {
      height: 90px;
      width: 200px;
      cursor: pointer;
    }
    .empty-box {
      width: 76px;
      height: 84px;
      background: #ffffff;
    }
    .search-container {
      width: 610px;
      padding: 0 10px;
      height: 40px;
      border-radius: 16px;
      border: 1px solid #41b0d9;
      display: flex;
      align-items: center;
      justify-content: space-between;
      ::v-deep(.search-input) {
        width: 520px;
        .el-input__wrapper {
          padding: 0 !important;
          box-shadow: none !important;
        }
      }
      .search-button {
        cursor: pointer;
        text-align: center;
        line-height: 32px;
        color: #ffffff;
        font-size: 20px;
        width: 70px;
        height: 32px;
        background: #41b0d9;
        border-radius: 16px;
      }
    }
  }
}
.nav {
  margin-top: 20px;
  width: 1200px;
  height: 40px;
  display: flex;
  margin: 0 auto;
  align-items: center;
  overflow: hidden;
}
.nav-fix {
  flex-shrink: 0;
  width: 198px;
  height: 38px;
  border: 1px solid #41b0d9;
  text-align: center;
  line-height: 40px;
  font-size: 18px;
  color: #41b0d9;
  margin-right: 20px;
  cursor: pointer;
}
.active {
  background-color: $themeColor;
  color: #fff;
}
.nav-item {
  flex-shrink: 0;
  cursor: pointer;
  height: 26px;
  line-height: 26px;
  font-size: 16px;
  padding: 0 10px;
  border-radius: 13px;
  margin-right: 20px;
}
</style>
